<template>
	<div class="data-over-view">
		 <el-card>
			 	<el-form :inline="true"  class="demo-form-inline" size="small">
			 	<el-form-item label="输入品类">
					 <div style="display:flex">
					    <el-input v-model="input"></el-input>
					<el-button type="primary"  style="margin-left:20px">查询</el-button>
					</div>
				</el-form-item>
					</el-form>
			<div id="main1">
				数据分析1
			</div>
		</el-card>
		<el-card>
			<div id="main2">
				数据分析2
			</div>
		</el-card>
	</div>
</template>
<script>

export default {
	data() {
		return {
			input:''
		};
	},
	mounted(){
		var echarts = require('echarts');
		var myChart1 =echarts.init(document.getElementById('main1'));
		myChart1.setOption({
			title:{
				text:'衣服品类'
			},
			tooltip:{},
			xAxis:{
				data:['衬衫','羊毛衫','雪纺衫',"裤子",'高跟鞋','袜子']
			},
			yAxis:{},
			series:[{
				name:'销量',
				type:'bar',
				data:[5,20,36,10,10,20]
			}]
		});
		var myChart2 =echarts.init(document.getElementById('main2'));
		myChart2.setOption({
			color:["skyblue"],
			textStyle:{
				color:"#000",
			},
			title: {
				text: '世界人口总量',
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				// boundaryGap: [0, 0.01],
				min:0,
				max:100,
				interval:25,
				axisTick:{
					show:false
				},
				axisLine:{
					lineStyle:{
						color:'transparent'
					}
				}
			},
			yAxis: {
				type: 'category',
				data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(亿)'],
				axisTick:{
					show:false
				},
				axisLine:{
					lineStyle:{
						color:'#fff'
					}
				},
				textStyle:{
					color:'#000'
				}
			},
			series: [
				{
					name: '2020年',
					type: 'bar',
					data: [19, 23, 31, 121, 134, 68],
					barWidth:'25px',
					itemStyle:{
						normal:{
							barBorderRadius:[0,10,10,0]
						}
					}
				}
			]
		})
	}
};
</script>

<style scoped>
.data-over-view {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 20px 0;
}
.el-card {
	width: 50%;
} 
#main1,
#main2 {
	height: 500px;
}
</style>